<template>
  <div class="login-container">
    <!--登录面板内容部分-->
    <div class="login-inner">
      <router-link to="/register" tag="div" class="rbtn">注册</router-link>
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
          <img src="./images/lk_logo_sm.png" alt="" width="100">
        </div>
        <!--面板标题-->
        <!-- <div class="login-header-title">
          <a href="javascript:;" :class="{current: loginMode}" @click="dealLoginMode(true)">短信登录</a>
          <a href="javascript:;" :class="{current: !loginMode}" @click="dealLoginMode(false)">密码登录</a>
        </div> -->
      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <form>
          <!--手机验证码登录部分-->
          <div>
            <section class="login-message">
             <input type="tel" maxlength="11" placeholder="请输入手机号" v-model="phone">
            </section>
            <section class="login-verification">
              <input type="text" maxlength="6" placeholder="请输入验证码" v-model="code">
              <button 
              v-if="!countDown" 
              class="get-verification" 
              :class="{phone_right:phoneRight}"
              @click.prevent="getPhone">
              获取验证码
            </button>
              <button v-else disabled="disabled" class="get-verification" >已发送({{countDown}}s)</button>
            </section>
            <section class="login-hint">
              温馨提示：点击登录即为同意
              <router-link to="/xieyi" tag="a">《神州科技服务协议》 </router-link>
              <router-link to="/xieyi1" tag="a">《数字证书使用协议》</router-link>
            </section>
          </div>
          <!--账号登录部分-->
          <!-- <div :class="{current: !loginMode}">
            <section>
              <section class="login-message">
                <input type="tel" maxlength="11" placeholder="用户名/手机/邮箱" v-model="user_name">
              </section>
              <section class="login-verification">
                <input type="password" maxlength="8" placeholder="密码" v-if="pwdMode" v-model="pwd">
                <input type="text" maxlength="8" placeholder="密码" v-else v-model="pwd">
                <div class="switch-show">
                    <img @click.prevent="dealpwdMode(false)"  :class="{on: pwdMode}" src="./images/hide_pwd.png" alt="" width="20">
                    <img @click.prevent="dealpwdMode(true)" :class="{on: !pwdMode}" src="./images/show_pwd.png" alt="" width="20">
                </div>
              </section>
              <section class="login-message">
                <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                <img 
                  ref="captcha"
                  class="get-verification" 
                  src="http://localhost:3000/api/captcha"
                  alt="captcha"
                  @click.prevent="getCaptcha">
              </section>
            </section>
          </div> -->
          <button class="login-submit" @click.prevent="login()">登录</button>
        </form>
        <!-- <button class="login-back" @click="$router.back()">返回</button> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getSendCode, PhoneCodeLogin } from "./../../api/index";
import { Toast } from "mint-ui";
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      // loginMode: true, //登录选项卡    true代表手机验证码登录  false代表密码登录
      countryCode:"+86",
      phone: "", //手机号码
      appKey:"aEMCxz97$e354#dzx_03m11",
      countDown: 0, //倒计时
      // pwdMode: true, //密码验证显示和隐藏
      // pwd: "", //密码
      code: "", //验证码
      userInfo: {}, //用户信息
      // user_name: "", //用户名
      // captcha: "" //图形验证码
    };
  },
  computed: {
    //手机号码验证
    phoneRight() {
      return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone);
    }
  },
  methods: {
    ...mapActions(["asyncPhoneCode"]),
    // dealLoginMode(flag) {
    //   //登录切换
    //   this.loginMode = flag;
    // },
    async getPhone() {
      //验证码倒计时
      if (this.phoneRight) {
        getSendCode(this.countryCode,this.phone).then(response => {
          Toast({
            message: response.msg,
            position: "center",
            duration: 2000
          });
          this.daojishi();
        }).catch(()=>{});
      }else{
         Toast({
          //弹出框
          message: "手机号码格式不正确",
          position: "center",
          duration: 2000
        });
      }
      
      //获取验证码
      // let result = await getSendCode(this.countryCode,this.phone);
      // console.log(result);
      // //判断验证码是否成功
      // if (result.code == 0) {
      //   Toast({
      //     //弹出框
      //     message: result.msg,
      //     position: "center",
      //     duration: 2000
      //   });
      // }else{
      //   Toast({
      //     //弹出框
      //     message: result.msg,
      //     position: "center",
      //     duration: 2000
      //   });
      // }

    },
    daojishi(){
      this.countDown = 60;
        this.timer = setInterval(() => {
          this.countDown--;
          //判断
          if (this.countDown == 0) {
            clearInterval(this.timer);
          }
        }, 1000);
    },
    // dealpwdMode(flag) {
    //   //密码显示和隐藏
    //   this.pwdMode = flag;
    // },
    //获取图形验证码
    // getCaptcha() {
    //   this.$refs.captcha.src =
    //     "http://localhost:3000/api/captcha?time=" + new Date();
    // },
    //登录
    async login() {
      //验证码登录

      if (!this.phone) {
        Toast({ message: "手机号码不能为空" });
        return;
      } else if (!this.phoneRight) {
        Toast({ message: "请输入正确的手机号" });
        return;
      } else if (!this.code) {
        Toast({ message: "验证码不能为空" });
        return;
      } else if (!/^\d{6}$/gi.test(this.code)) {
        Toast({ message: "请输入正确的验证码" });
        return;
      }
      PhoneCodeLogin(this.countryCode, this.phone, this.code, this.appKey).then(response => {
            this.userInfo = response.data;
            this.asyncPhoneCode(this.userInfo);
            //alert(this.userInfo.phone);
            //alert(this.userInfo);
            //this.$router.back(); //返回我的页面
            this.$router.push('/loading');
        }).catch(()=>{});
      
        

      // 登录请求
      // const result = await PhoneCodeLogin(this.countryCode, this.phone, this.code);
      // //判断是否登录成功
      // if (result.code === 0) {
      //   this.userInfo = result.data;
      //   //alert(result.data);
      // } else {
      //   this.userInfo = {
      //     msg: result.msg
      //   };
      // }
    
      // //alert(this.userInfo.token);
      // //最后登录处理
      // if (!this.userInfo.token) {
      //   Toast(this.userInfo.msg);
      // } else {
      //   //同步数据
      //   this.asyncPhoneCode(this.userInfo);
      //   //this.$router.back(); //返回我的页面
      //   this.$router.push('/home') 
      // }
    }
  }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.login-container {
  width 100%
  height 100%
  background-color #fff
  position fixed
  left 0
  top 0
  .login-inner {
    position relative
    padding-top 80px
    width 80%
    margin 0 auto
    .rbtn{
      position absolute
      right 0
      top 20px
      border 1px solid #0077ff
      color #0077ff
      border-radius 15px
      padding 5px 15px
    }
    .login-header {
      .login-logo {
        font-size 40px
        font-weight bold
        color #0077ff
        text-align center
        padding-bottom 30px
      }

      .login-header-title {
        padding-top 40px
        padding-bottom 10px
        text-align center

        >a {
          color #333
          font-size 14px
          padding-bottom 4px

          &:first-child {
            margin-right 40px
          }
          &.current {
            color #0077ff
            font-weight 700
            border-bottom 2px solid #0077ff
          }
        }
      }
    }

    .login-content {
      >form {
        >div {
          /* display: none;

          &.current {
            display: block;
          } */

          input {
            width: 100%;
            height: 100%;
            padding-left: 8px;
            box-sizing: border-box;
            border-bottom: 1px solid #ddd;
            /* border-radius: 4px; */
            outline: 0;
            font: 400 15px Arial;

            &:focus {
              border-bottom: 1px solid #0077ff;
            }
          }

          .login-message {
            position: relative;
            margin-top: 16px;
            height: 48px;
            font-size: 14px;
            background: #fff;
          }

          .login-verification {
            position: relative;
            margin-top: 16px;
            height: 48px;
            font-size: 14px;
            background: #fff;
            .get-verification {
              position: absolute;
              top: 38%;
              right: 10px;
              transform: translateY(-50%);
              border: 0;
              color: #ccc;
              font-size: 15px;
              background: transparent;
              height:100%;
              &.phone_right {
                color: #0077ff;
              }
            }  
            .switch-show {
              position: absolute;
              right: 10px;
              top: 12px;

              img {
                display: none;
              }

              img.on {
                display: block;
              }
            }
          }

          .login-hint {
            margin-top: 12px;
            color: #999;
            font-size: 12px;
            line-height: 20px;

            >a {
              color: #0077ff;
            }
          }
        }

        .login-submit {
          display: block;
          width: 100%;
          height: 42px;
          margin-top: 30px;
          border-radius: 4px;
          background: #0077ff;
          color: #fff;
          text-align: center;
          font-size: 16px;
          line-height: 42px;
          border: 0;
        }
      }

      .login-back {
        display: block;
        width: 100%;
        height: 42px;
        margin-top: 15px;
        border-radius: 4px;
        background: transparent;
        border: 1px solid #0077ff;
        color: #0077ff;
        text-align: center;
        font-size: 16px;
        line-height: 42px;
      }
    }
  }
}
</style>
